import React from 'react'
import { Checkbox, Row, Form, Input, Button, Rate, message, Result } from 'antd'
import { FrownOutlined, MehOutlined, SmileOutlined } from '@ant-design/icons'
import './index.css'
import { Link } from 'react-router-dom'
import { suggestCommit } from '../../utils/api'

const { TextArea } = Input
const customIcons = {
  1: <FrownOutlined />,
  2: <FrownOutlined />,
  3: <MehOutlined />,
  4: <SmileOutlined />,
  5: <SmileOutlined />,
}

const desc = ['糟糕', '不太好', '一般', '良好', '优秀']

const Demo = () => {
  const [submited, setSubmited] = React.useState(false)
  const [loading, setLoading] = React.useState(false)
  const [form] = Form.useForm()
  // 处理提交
  const handleSubmit = () => {
    // console.log(JSON.stringify(form.getFieldsValue()))
    setLoading(true)
    const msg = message.loading({
      content: '问题反馈中',
      duration: 0,
    })

    suggestCommit(form.getFieldsValue())
      .then(
        (res) => {
          msg()
          setSubmited(true)
          setLoading(false)
        },
        (err) => {
          msg()
          setLoading(false)
          message.error('问题反馈异常，请稍后重试')
        }
      )
      .catch((err) => {
        msg()
        setLoading(false)
        message.error('问题反馈异常，请稍后重试')
      })
  }

  // 重新提交
  const handleReSubmit = () => {
    form.resetFields()
    setSubmited(false)
    setLoading(false)
  }

  return (
    <div className='feedback'>
      <Form form={form} name='feedback-form' onFinish={() => handleSubmit()}>
        <div className='feedback-wrapper'>
          <div className='feedback-form'>
            {submited ? (
              <Result
                icon={<SmileOutlined />}
                // status='success'
                title='您的宝贵意见我们已收到，感谢您参与反馈！'
                // subTitle='您的宝贵意见我们已收到，感谢您的支持与反馈！'
                extra={[
                  <Button key='feedBack' onClick={() => handleReSubmit()}>
                    再次反馈
                  </Button>,
                  <Button type='primary' key='backHome' style={{ marginLeft: 10 }}>
                    <Link to='/'>回到首页</Link>
                  </Button>,
                ]}
              />
            ) : (
              <>
                <span className='form-title'>问题反馈</span>
                <span className='form-title-info'>
                  为了完善与你同行在线转换平台，我们诚挚的邀请您反馈意见，非常感谢
                </span>
                <div className='form-question-list'>
                  <div className='form-question'>
                    <span className='form-question-title'>
                      <span style={{ color: 'red' }}>*</span>1.请选择您遇到的问题类型
                    </span>
                    <Form.Item name='type' rules={[{ required: true, message: '请勾选您遇到的问题类型' }]}>
                      <Checkbox.Group style={{ width: '100%' }}>
                        <Row>
                          <Checkbox value='A'>
                            <span className='answer-checkbox'>使用体验不佳，经常卡顿、丢失数据</span>
                          </Checkbox>
                        </Row>
                        <Row>
                          <Checkbox value='B'>
                            <span className='answer-checkbox'>转换效果不佳，字体、格式、样式等有问题</span>
                          </Checkbox>
                        </Row>
                        <Row>
                          <Checkbox value='C'>
                            <span className='answer-checkbox'>体验次数太少了，还没体验几次就超限了</span>
                          </Checkbox>
                        </Row>
                        <Row>
                          <Checkbox value='D'>
                            <span className='answer-checkbox'>想要的文件格式不支持</span>
                          </Checkbox>
                        </Row>
                        <Row>
                          <Checkbox value='E'>
                            <span className='answer-checkbox'>想对接API服务，没看到有提供文档</span>
                          </Checkbox>
                        </Row>
                        <Row>
                          <Checkbox value='Z'>
                            <span className='answer-checkbox'>其他</span>
                          </Checkbox>
                        </Row>
                      </Checkbox.Group>
                    </Form.Item>
                  </div>

                  <div className='form-question'>
                    <span className='form-question-title'>
                      <span style={{ color: 'red' }}>*</span>2.请填写您的问题详情、建议或需求
                    </span>
                    <Form.Item name='suggestion' rules={[{ required: true, message: '请填写建议或需求' }]}>
                      <TextArea placeholder='请输入' maxLength={500} showCount autoSize={{ minRows: 2, maxRows: 6 }} />
                    </Form.Item>
                  </div>

                  <div className='form-question'>
                    <span className='form-question-title'>3.对与你同行在线转换平台的评价</span>
                    <Form.Item name='rate'>
                      <Rate tooltips={desc} character={({ index }) => customIcons[index + 1]}></Rate>
                    </Form.Item>
                  </div>

                  <div className='form-question'>
                    <span className='form-question-title'>4.您的名称/公司</span>
                    <Form.Item name='name'>
                      <TextArea placeholder='请输入' maxLength={50} showCount autoSize={{ minRows: 1 }} />
                    </Form.Item>
                  </div>

                  <div className='form-button'>
                    <Form.Item>
                      <Button type='primary' htmlType='submit' disabled={loading}>
                        {loading ? '提交中' : '提交'}
                      </Button>
                    </Form.Item>
                  </div>
                </div>
              </>
            )}
          </div>
        </div>
      </Form>
    </div>
  )
}

export default Demo
